{% extends 'base.html' %}
{% load static %}

{% block title %}库存预警列表{% endblock %}

{% block extra_css %}
<style>
    .alert-row {
        transition: all 0.3s ease;
    }
    .alert-row:hover {
        background-color: #f8f9fa;
        transform: translateX(5px);
    }
    .priority-urgent {
        border-left: 4px solid #dc3545;
    }
    .priority-high {
        border-left: 4px solid #fd7e14;
    }
    .priority-medium {
        border-left: 4px solid #ffc107;
    }
    .priority-low {
        border-left: 4px solid #28a745;
    }
    .filter-card {
        background: #f8f9fa;
        border-radius: 10px;
        padding: 15px;
        margin-bottom: 20px;
    }
    .batch-actions {
        background: #e9ecef;
        padding: 10px;
        border-radius: 5px;
        margin-bottom: 20px;
        display: none;
    }
    .table-responsive {
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2><i class="fas fa-list text-primary"></i> 库存预警列表</h2>
                <div>
                    <a href="{% url 'assets:inventory_alert_dashboard' %}" class="btn btn-info">
                        <i class="fas fa-tachometer-alt"></i> 仪表板
                    </a>
                    <a href="{% url 'assets:inventory_status_overview' %}" class="btn btn-secondary">
                        <i class="fas fa-chart-bar"></i> 库存状态
                    </a>
                    {% if user.is_staff %}
                    <form method="post" action="{% url 'assets:generate_inventory_alerts' %}" class="d-inline">
                        {% csrf_token %}
                        <button type="submit" class="btn btn-success">
                            <i class="fas fa-sync"></i> 生成预警
                        </button>
                    </form>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- 筛选器 -->
    <div class="filter-card">
        <form method="get" class="row g-3">
            <div class="col-md-3">
                <label class="form-label">搜索</label>
                <input type="text" class="form-control" name="search" value="{{ search_query }}" 
                       placeholder="耗材名称、编码或消息">
            </div>
            <div class="col-md-2">
                <label class="form-label">预警类型</label>
                <select class="form-select" name="alert_type">
                    <option value="">全部</option>
                    {% for value, label in alert_type_choices %}
                    <option value="{{ value }}" {% if selected_alert_type == value %}selected{% endif %}>
                        {{ label }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">状态</label>
                <select class="form-select" name="status">
                    <option value="">全部</option>
                    {% for value, label in status_choices %}
                    <option value="{{ value }}" {% if selected_status == value %}selected{% endif %}>
                        {{ label }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">优先级</label>
                <select class="form-select" name="priority">
                    <option value="">全部</option>
                    {% for value, label in priority_choices %}
                    <option value="{{ value }}" {% if selected_priority == value %}selected{% endif %}>
                        {{ label }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">仓库</label>
                <select class="form-select" name="warehouse">
                    <option value="">全部</option>
                    {% for warehouse in warehouses %}
                    <option value="{{ warehouse.id }}" {% if selected_warehouse == warehouse.id|stringformat:"s" %}selected{% endif %}>
                        {{ warehouse.name }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-1">
                <label class="form-label">&nbsp;</label>
                <div>
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- 批量操作 -->
    {% if user.is_staff %}
    <div class="batch-actions" id="batchActions">
        <form method="post" action="{% url 'assets:inventory_alert_batch_action' %}" id="batchForm">
            {% csrf_token %}
            <div class="row align-items-center">
                <div class="col-md-6">
                    <span class="text-muted">已选择 <span id="selectedCount">0</span> 个预警</span>
                </div>
                <div class="col-md-6 text-end">
                    <select name="action" class="form-select d-inline-block w-auto me-2" required>
                        <option value="">选择操作</option>
                        <option value="acknowledge">确认</option>
                        <option value="resolve">解决</option>
                        <option value="ignore">忽略</option>
                    </select>
                    <button type="submit" class="btn btn-primary">执行</button>
                    <button type="button" class="btn btn-secondary" onclick="clearSelection()">取消</button>
                </div>
            </div>
        </form>
    </div>
    {% endif %}

    <!-- 预警列表 -->
    <div class="card">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="table-dark">
                        <tr>
                            {% if user.is_staff %}
                            <th width="40">
                                <input type="checkbox" id="selectAll" class="form-check-input">
                            </th>
                            {% endif %}
                            <th>耗材信息</th>
                            <th>预警类型</th>
                            <th>优先级</th>
                            <th>状态</th>
                            <th>数量信息</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for alert in page_obj %}
                        <tr class="alert-row priority-{{ alert.priority }}">
                            {% if user.is_staff %}
                            <td>
                                <input type="checkbox" name="alert_ids" value="{{ alert.id }}" 
                                       class="form-check-input alert-checkbox">
                            </td>
                            {% endif %}
                            <td>
                                <div>
                                    <strong>{{ alert.consumable.name }}</strong>
                                    <br>
                                    <small class="text-muted">
                                        {{ alert.consumable.code }} - {{ alert.consumable.category.name }}
                                        <br>
                                        <i class="fas fa-warehouse"></i> {{ alert.consumable.warehouse.name }}
                                    </small>
                                </div>
                            </td>
                            <td>
                                <span class="badge 
                                    {% if alert.alert_type == 'out_of_stock' %}badge-danger
                                    {% elif alert.alert_type == 'low_stock' %}badge-warning
                                    {% elif alert.alert_type == 'reorder_point' %}badge-info
                                    {% else %}badge-secondary{% endif %}">
                                    {{ alert.get_alert_type_display }}
                                </span>
                            </td>
                            <td>
                                <span class="badge 
                                    {% if alert.priority == 'urgent' %}badge-danger
                                    {% elif alert.priority == 'high' %}badge-warning
                                    {% elif alert.priority == 'medium' %}badge-info
                                    {% else %}badge-secondary{% endif %}">
                                    {{ alert.get_priority_display }}
                                </span>
                            </td>
                            <td>
                                <span class="badge 
                                    {% if alert.status == 'active' %}badge-danger
                                    {% elif alert.status == 'acknowledged' %}badge-warning
                                    {% elif alert.status == 'resolved' %}badge-success
                                    {% else %}badge-secondary{% endif %}">
                                    {{ alert.get_status_display }}
                                </span>
                            </td>
                            <td>
                                <div class="small">
                                    <strong>当前: {{ alert.current_quantity }}</strong>
                                    <br>
                                    <span class="text-muted">
                                        最小: {{ alert.consumable.min_quantity }}
                                        {% if alert.consumable.reorder_point %}
                                        <br>补货点: {{ alert.consumable.reorder_point }}
                                        {% endif %}
                                    </span>
                                </div>
                            </td>
                            <td>
                                <small>{{ alert.created_at|date:"Y-m-d H:i" }}</small>
                            </td>
                            <td>
                                <div class="btn-group btn-group-sm">
                                    <a href="{% url 'assets:inventory_alert_detail' alert.pk %}" 
                                       class="btn btn-outline-primary" title="查看详情">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    {% if user.is_staff and alert.status == 'active' %}
                                    <form method="post" action="{% url 'assets:inventory_alert_acknowledge' alert.pk %}" class="d-inline">
                                        {% csrf_token %}
                                        <button type="submit" class="btn btn-outline-warning" title="确认">
                                            <i class="fas fa-check"></i>
                                        </button>
                                    </form>
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="{% if user.is_staff %}8{% else %}7{% endif %}" class="text-center py-4">
                                <div class="text-muted">
                                    <i class="fas fa-inbox fa-3x mb-3"></i>
                                    <p>没有找到预警记录</p>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 分页 -->
    {% if page_obj.has_other_pages %}
    <nav aria-label="预警列表分页" class="mt-4">
        <ul class="pagination justify-content-center">
            {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page=1{% if search_query %}&search={{ search_query }}{% endif %}{% if selected_alert_type %}&alert_type={{ selected_alert_type }}{% endif %}{% if selected_status %}&status={{ selected_status }}{% endif %}{% if selected_priority %}&priority={{ selected_priority }}{% endif %}{% if selected_warehouse %}&warehouse={{ selected_warehouse }}{% endif %}">首页</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if selected_alert_type %}&alert_type={{ selected_alert_type }}{% endif %}{% if selected_status %}&status={{ selected_status }}{% endif %}{% if selected_priority %}&priority={{ selected_priority }}{% endif %}{% if selected_warehouse %}&warehouse={{ selected_warehouse }}{% endif %}">上一页</a>
                </li>
            {% endif %}

            {% for num in page_obj.paginator.page_range %}
                {% if page_obj.number == num %}
                    <li class="page-item active">
                        <span class="page-link">{{ num }}</span>
                    </li>
                {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ num }}{% if search_query %}&search={{ search_query }}{% endif %}{% if selected_alert_type %}&alert_type={{ selected_alert_type }}{% endif %}{% if selected_status %}&status={{ selected_status }}{% endif %}{% if selected_priority %}&priority={{ selected_priority }}{% endif %}{% if selected_warehouse %}&warehouse={{ selected_warehouse }}{% endif %}">{{ num }}</a>
                    </li>
                {% endif %}
            {% endfor %}

            {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if selected_alert_type %}&alert_type={{ selected_alert_type }}{% endif %}{% if selected_status %}&status={{ selected_status }}{% endif %}{% if selected_priority %}&priority={{ selected_priority }}{% endif %}{% if selected_warehouse %}&warehouse={{ selected_warehouse }}{% endif %}">下一页</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if search_query %}&search={{ search_query }}{% endif %}{% if selected_alert_type %}&alert_type={{ selected_alert_type }}{% endif %}{% if selected_status %}&status={{ selected_status }}{% endif %}{% if selected_priority %}&priority={{ selected_priority }}{% endif %}{% if selected_warehouse %}&warehouse={{ selected_warehouse }}{% endif %}">末页</a>
                </li>
            {% endif %}
        </ul>
    </nav>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 全选/取消全选
    $('#selectAll').change(function() {
        $('.alert-checkbox').prop('checked', this.checked);
        updateBatchActions();
    });
    
    // 单个复选框变化
    $('.alert-checkbox').change(function() {
        updateBatchActions();
        
        // 更新全选状态
        var totalCheckboxes = $('.alert-checkbox').length;
        var checkedCheckboxes = $('.alert-checkbox:checked').length;
        
        if (checkedCheckboxes === 0) {
            $('#selectAll').prop('indeterminate', false).prop('checked', false);
        } else if (checkedCheckboxes === totalCheckboxes) {
            $('#selectAll').prop('indeterminate', false).prop('checked', true);
        } else {
            $('#selectAll').prop('indeterminate', true);
        }
    });
    
    // 批量操作表单提交
    $('#batchForm').submit(function(e) {
        var selectedCount = $('.alert-checkbox:checked').length;
        var action = $('select[name="action"]').val();
        
        if (selectedCount === 0) {
            e.preventDefault();
            alert('请选择要操作的预警');
            return false;
        }
        
        if (!action) {
            e.preventDefault();
            alert('请选择要执行的操作');
            return false;
        }
        
        var actionText = $('select[name="action"] option:selected').text();
        if (!confirm(`确定要${actionText} ${selectedCount} 个预警吗？`)) {
            e.preventDefault();
            return false;
        }
        
        // 将选中的复选框添加到表单
        $('.alert-checkbox:checked').each(function() {
            $('#batchForm').append('<input type="hidden" name="alert_ids" value="' + $(this).val() + '">');
        });
    });
});

function updateBatchActions() {
    var selectedCount = $('.alert-checkbox:checked').length;
    $('#selectedCount').text(selectedCount);
    
    if (selectedCount > 0) {
        $('#batchActions').show();
    } else {
        $('#batchActions').hide();
    }
}

function clearSelection() {
    $('.alert-checkbox').prop('checked', false);
    $('#selectAll').prop('checked', false).prop('indeterminate', false);
    updateBatchActions();
}
</script>
{% endblock %}
